<route>
  {
      meta: {
          title: '登录',
          constant: true,
          layout: false,
      }
  }
</route>
<template>
  <div class="loginMain">
    <!-- <img class="logo" :src="configData.systemLogo" />
    <div class="bgImg">
      <img src="@/assets/images/banner.png" alt="" />
    </div> -->
    <el-form
      ref="loginFormRef"
      size="large"
      label-position="left"
      label-width="50px"
      class="login-container"
      :model="loginForm"
      :rules="loginRules"
      @submit.prevent
    >
      <h3 class="title">{{ title }}</h3>
      <el-form-item prop="loginName" label="账号">
        <el-input
          v-model="loginForm.loginName"
          maxlength="20"
          type="text"
          class="username_input"
          autocomplete="off"
          placeholder="账号"
        />
      </el-form-item>
      <el-form-item prop="password" label="密码">
        <el-input
          v-model="loginForm.password"
          maxlength="20"
          type="password"
          class="passWord_input"
          autocomplete="new-password"
          placeholder="密码"
        />
      </el-form-item>
      <div class="pb-22px"><el-checkbox v-model="loginForm.remember" class="checked">记住账号</el-checkbox></div>
      <el-button type="primary" class="loginBut" round native-type="submit" @click="handleLogin(loginForm)">登录</el-button>
    </el-form>
  </div>
</template>

<script lang="ts" setup name="Login">
import { encryptData } from "@/utils/encrypt";

import { storeToRefs } from "pinia";
import type { FormInstance, FormRules } from "element-plus";
import useUserStore from "@/store/modules/user";

const route = useRoute();
const router = useRouter();

const userStore = useUserStore();

const title = import.meta.env.VITE_APP_TITLE;

// 表单类型，login 登录，reset 重置密码
const loading = ref(false);
const redirect = ref(route.query.redirect?.toString() ?? "/");

// 登录
const loginFormRef = ref<FormInstance>();
const loginForm = ref({
  loginName: localStorage.loginName || "",
  password: "",
  loginDevice: 1,
  captchaUuid: "string",
  captchaCode: "string",
  remember: !!localStorage.loginName,
});
const loginRules = ref<FormRules>({
  loginName: [{ required: true, trigger: "blur", message: "请输入用户名" }],
  password: [
    { required: true, trigger: "blur", message: "请输入密码" },
    { min: 6, max: 18, trigger: "blur", message: "密码长度为6到18位" },
  ],
});
function handleLogin() {
  loginFormRef.value &&
    loginFormRef.value.validate((valid) => {
      if (valid) {
        loading.value = true;
        userStore
          .login({ ...loginForm.value, password: encryptData(loginForm.value.password) })
          .then(() => {
            loading.value = false;
            if (loginForm.value.remember) {
              localStorage.setItem("loginName", loginForm.value.loginName);
            } else {
              localStorage.removeItem("loginName");
            }
            router.push(redirect.value);
          })
          .catch(() => {
            loading.value = false;
          });
      }
    });
}
</script>

<style lang="scss" scoped>
.bgImg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.loginMain {
  //background: linear-gradient(-10deg, #1c3c70 0%, #15267a 28%, #0f2647 65%, #0c1f3a 100%);
  background: url("@/assets/images/bg.jpg");
  background-size: cover;
  height: 100vh;
  overflow: hidden !important;
  width: 100%;
  position: relative;

  .logo {
    margin-top: 30px;
    margin-left: 10%;
    max-width: 180px;
    max-height: 80px;
  }

  .loginBut {
    width: 100%;
    border: none;
  }

  .login-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 36px 80px 40px;
    width: 480px;
    background: #fff;
    border-radius: 10px;
    z-index: 2;

    .title {
      font-size: 32px;
      color: #000;
      line-height: 45px;
      margin-bottom: 30px;
      text-align: center;
    }

    .checked {
      color: #9c9c9c;
    }
  }
}
</style>
